<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>追加dom</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">导航-1</a></li>
            <li><a href="#">导航-2</a></li>
            <li><a href="#">导航-3</a></li>
            <li><a href="#">导航-4</a></li>
            <li><a href="#">导航-5</a></li>
            <li><a href="#">导航-6</a></li>
        </ul>
    </nav>
    <div id="d1" class="parent">
        <div class='my'>
            <h1>message</h1>
            <ol>
                <li><a href="#">div-1</a></li>
                <li><a href="#">div-2</a></li>
                <li><a href="#">div-3</a></li>
                <li><a href="#">div-4</a></li>
                <li><a href="#">div-5</a></li>
            </ol>
        </div>

    </div>
    <button id="btn1" onclick='addChild()'>添加子节的</button>
    <button id='btn2'>inertBefore</button>
    <button id='btn3'>替换节点</button>
    <!-- 通常建议进入js，作为body的最后一个子元素 -->
    <script>
        //$合法的函数名（自定义）
        let $=function(id){
            return document.getElementById(id);
        }
        
        //自定义的一个函数创建一个新的节点
        let createNode=function(tagName,content){
            let node= document.createElement(tagName);
            node.innerHTML=content;
            return node;
        }

        $('btn3').onclick=function( ){
            let div=$('d1');
            let list=div.getElementsByClassName('my');
            console.log(list);
            let parent=list[0];
            //创建一个span标签，内容为 还有45分钟下课。。
            let newNode= createNode('span','还有45分钟下课。。');
            //替换div中的h1
            parent.replaceChild(newNode,parent.childNodes[1]);

        }
   
        //为btn2绑定一个单击事件
        $('btn2').onclick=function(){
             //insertBefore(newNode,oldNode);将新的节点插入到oldNode之前
             let parent=$('d1');
             //1. document.createElement()创建一个新的节点
             let newNode=document.createElement("h2");
             //2. 定义内容
             newNode.innerHTML='insertBefore :times='+new Date().getTime(); 
             //获得旧节点
            let firstChild= parent.childNodes[0];
             console.log(firstChild);
             //调用interBefore
             parent.insertBefore(newNode,firstChild);
        }

        let addChild=function(){
            let div=$('d1');
            //为div追加一个子节点
            //1. document.createElement()创建一个新的节点
            let h2=document.createElement("h2");
            //2. h2定义内容
            h2.innerHTML='农大的枫叶红了'; 
            //3. 将新的节点作为div的字节的
            div.appendChild(h2);
       }
        

    </script>
</body>
</html>